<template>
	<view>
		<!-- //轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
		      <swiper-item v-for="item in 5" :key="i">
		        <image src="@/static/login.jpg" @click="preview(i)"></image>
		      </swiper-item>
		</swiper>
		<!--商品信息区-->
		<view class="goods-info-box">
			<view class="price">￥{{detailList.price}}</view>
			<view class="goods-info-body">
			        <!-- 商品的名字 -->
			    <view class="goods-name">{{detailList.leaf_name}}</view>
			    <!-- 收藏 -->
			    <view class="favi" @tap="addStar()">
					<text class="iconfont icon-shoucang" :class="{activeIcon:starIcon==true}"></text>
			        <text>收藏</text>
			    </view>
			</view>
			
			<view class="bot-row">
							<text>销量：{{detailList.pvo}}</text>
							<text>库存：{{detailList.num}}</text>
							<text>浏览量：{{detailList.views}}</text>
			</view>
      <!-- 运费 -->
			<view class="yf">快递：免运费</view>
			<view class="ggk">
				<view class="ggk-name">
					选择规格
				</view>
				<view class="ggk-item">
					<view class="ggk-item-c" :class="{gglight:activeIndex===index}" v-for="(item,index) in ggkitem" @click="ggkLight(item,index)">{{item}}</view>
				</view>
			</view>
		</view>
	<!-- 	评论 -->
	<!-- <rich-text :nodes="goods_info.goods_introduce"></rich-text> -->
		<view class="eva-section">
			<view class="e-header">
				<view is-link value="好评率 100%">
					<view class="title">
						<view class="van-cell-text">评价(68)</view>
						<view class="title-right">
						<view class="good-txt">好评率 100%</view>
						<text class="iconfont icon-xiangyoujiantou"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="eva-box">
				<image width="100%" height="100%" round class="myPhoto" :src="comList[0].user_logo">
				</image>
				<view class="right">
					<text class="name">{{comList[0].user_name}}</text>
					<text class="con">{{comList[0].com_text}}</text>
					<view class="bot">
						<text class="attr">数量：{{comList[0].leaf_num}}</text>
						<text class="time">{{comList[0].com_time}}</text>
						<text class="like" @click="LikeBtn()">{{comList[0].com_like}}</text>
					</view>
				</view>
			</view>
		</view> 
		<!-- 图文详情 -->
		<view class="detail-desc">
			<view class="d-header">
				<text>———— 图文详情 ————</text>
			</view>
			<view class="d-photo">
				<image width="100%" height="100%" class="photo" v-for="item in 5" src="https://img.tukuppt.com/photo-big/00/11/55/6193c767c6ad76098.jpg">
				</image>
			</view>
		</view>
		<!-- 底部操作栏 -->
		<view class="page-bottom">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
		</view>
		<uniPopshop ref="shoppop" :buyitem="detailList" :megrecive="msgre"></uniPopshop>
	</view>
</template>

<script>
	import getDateTime from "@/common/getDateTime.js"
	export default {
		data () {
		  return {
			activeIndex:0,
			lnum:'100g',
			ggkitem:['100g','200g','300g'],
			starIcon:false,
			detailList:[],
			comList:[],
		    options: [{
				icon: 'headphones',
				text: '客服'
			}, {
				icon: 'cart',
				text: '购物车',
			}],
		    buttonGroup: [{
		      text: '加入购物车',
		      backgroundColor: '#ff0000',
		      color: '#fff'
		    },
		    {
		      text: '立即购买',
		      backgroundColor: '#ffa200',
		      color: '#fff'
		    }
		    ],
			params:{
				userId:1,
				leafId:1,
				leafName:"",
				leafImg:"",
				leafNum:"",
				leafCount:1,
				cartTime:"",
				price:0
				
			},	
			msgre:{
				username:'',
				address:'',
				date:'',
				phone:''
			}
		  }
		},
		//details页面接收到的数据
		onLoad(e) {
			this.detailList=JSON.parse(decodeURIComponent(e.data))
			console.log("详情参数",this.detailList)
			this.params.userId=this.$baseName.user.userid
			this.getComments()
		},
		methods: {
			ggkLight(item,index){
				//点击高亮
				console.log("是否搜索",this.sflag)				
				this.activeIndex=index	
				this.lnum=item
			},
		  onClick (e) {
			  //index=1是购物车=0是客服 
		    // uni.showToast({
		    //   title: `点击${e.content.text}`,
		    //   icon: 'none'
		    // })
			if(e.index==1){
				console.log("跳转到购物车")
				uni.switchTab({
					url: '../buy/buy'
				})
			}
			
		  },
		  openShopPop(){
			  	this.$refs.shoppop.openpop();
		  },
		  buttonClick (e) {
			   if(e.index==0){
				   console.log(e)
				   console.log("访问添加购物车接口")
				   console.log(this.detailList)
				   //设置添加时间为当前时间
				   var dateTime=getDateTime.dateTimeStr('y-m-d h:i:s')
				   this.params.cartTime=dateTime
				   this.addLeafCart()
			   }else{
					//立即购买
					console.log("立即购买")
					this.getMessage()
					console.log("父组件",this.msgre)
					this. openShopPop()
				}
		  },
		  changeView(){
			  //修改浏览量
		  },
		  getMessage(){
		  	//获取收货信息
		  	this.msgre.username=this.$baseName.user.username
		  	this.msgre.address=this.$baseName.user.address
			this.msgre.phone=this.$baseName.user.phone
		  	this.msgre.date=getDateTime.dateTimeStr('m月D日')
		  	console.log(this.address)
		  	console.log("送达日期",this.date)
		  },
		  //添加购物车
		  addLeafCart(){
			  this.params.leafId=this.detailList.leaf_id
			  this.params.leafName=this.detailList.leaf_name
			  this.params.leafImg=this.detailList.leaf_img
			  this.params.leafNum=this.lnum
			  this.params.price=this.detailList.price
			  console.log(this.params)
			  uni.request({
			  	url:this.$baseUrl+'cart/add',
			  	method: 'POST',
			  	//传递参数
			  	data:this.params,
			  	success:res=>{
			  		if(res.statusCode!=200){
			  			return uni.showToast({
			  				title:'获取数据失败'
			  			})
			  		}
			  		// this.LeafList=res.data.list
			  		
			  	}
			  })
		  },
		  //获取茶叶响应【评论
		  getComments(){
			var leafid=this.detailList.leaf_id
			uni.request({
					url:this.$baseUrl+"Leaflist/comment?leafid="+leafid,
					method: 'GET',
					//传递参数
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'获取数据失败'
							})
						}
						console.log(res)
						this.comList=res.data.comlist
						console.log("评论",this.comList)
						
					}
				})
		  },
		  //添加收藏
		  addStar(){
			  console.log(this.detailList)
			  let starq={
				  userid:1,
				  leafid:1,
				  time:'',
			  }
			  starq.userid=this.$baseName.user.userid
			  starq.leafid=this.detailList.leaf_id
			  starq.time=getDateTime.dateTimeStr('y-m-d h:i:s')
			  if(this.starIcon==false){
				  uni.request({
					url:this.$baseUrl+"star/add",
					method:'POST',
					data:starq,
					//传递参数
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'获取数据失败'
							})
						}
						uni.showToast({
							title:'收藏成功'
						})
						console.log(res)
						this.starIcon=true
						console.log(this.starIcon)
					}
				  })
				}
			  
			  else{
				  uni.request({
					url:this.$baseUrl+"star/del",
					method:'POST',
					data:starq,
					//传递参数
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'获取数据失败'
							})
						}
						uni.showToast({
							title:'取消收藏'
						})
						console.log(res)
						this.starIcon=false
						console.log(this.starIcon)
					}
				  })
				}
			  }
		}
	}
</script>

<style lang="scss">
	page{
		background: #C8C7CC;
	}
	swiper {
	    height: 500rpx;
		
	    image {
	      width: 100%;
	      height: 100%;
	    }
	  }
	  .goods-info-box {
	      padding: 10px;
	      padding-right: 0;
		  background: #FFFFFF;
		  .bot-row {
		  		display: flex;
		  		align-items: center;
		  		height: 30rpx;
		  		font-size: 24rpx;
		  		color: #909399;
				justify-content: space-between;
				padding-right: 5px;
		  	}

	      .price {
	        color: #C00000;
	        font-size: 18px;
	        margin: 10px 0;
	      }
	  
	      .goods-info-body {
	        display: flex;
	        justify-content: space-between;
			padding-bottom: 5px;
	        .goods-name {
	          font-size: 13px;
	          margin-right: 10px;
	        }
	  
	        .favi {
	          width: 120px;
	          font-size: 12px;
	          display: flex;
	          flex-direction: column;
	          align-items: center;
	          justify-content: center;
	          border-left: 1px solid #efefef;
	          color: gray;
			  .activeIcon{
				  color: yellow;
			  }
	        }
	      }
	  
	      .yf {
	        font-size: 12px;
	        color: gray;
	        margin: 10px 0;
	      }
		  .ggk{
			  .ggk-item{
				  display: flex;
				  justify-content: space-around;
				  .ggk-item-c{
					 
					  height: 30px;
					  width: 70px;
					  padding: 10px 20px;
					  margin: 10px 0px;
					  border-radius: 10px;
				  }
				  .gglight{
					   background: #8cc78c;
				  }
			  }
			  
		  }
	    }
		.goods_nav {
		    position: fixed;
		    bottom: 0;
		    left: 0;
		    width: 100%;
		  }
		
		  .goods-detail-container {
		    padding-bottom: 50px;
		  }
	.eva-section {
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			margin-top: 16rpx;
			.eva-box {
					display: flex;
					padding: 20rpx 32rpx;
					.myPhoto {
							flex-shrink: 0;
							width: 80rpx;
							height: 80rpx;
					}
			}
			.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					font-size: 28rpx;
					color: #606266;
					padding-left: 26rpx;
					.con {
							font-size: 28rpx;
							color: #303133;
							padding: 20rpx 0;
					}
					.bot {
							font-size: 24rpx;
							display: flex;
							color: #909399;
							justify-content: space-between;
							.like::before{
								font-family: "iconfont"!important;
								content: "\e6ae";
								color: red;
							}
					}
			}
			.e-header{
				border-bottom: 1px #808080 solid;
				.title{
					padding: 10px 0 10px 10px;
					display: flex;
					justify-content: space-between;
					.title-right{
						display: flex;
						.good-txt{
							color: #999999;
						}
						text{
							padding-top: 2px;
						}
					}
				}
			}

	}
	.detail-desc {
		background-color: #FFFFFF;
		margin: 16rpx 0px;
		height: 2026px;
		.d-header {
				align-items: center;
				height: 80rpx;
				font-size: 30rpx;
				color: #303133;
				position: relative;
				text-align: center;
				line-height: 80rpx;
				text {
						padding: 0 20rpx;
						background: #FFFFFF;
						position: relative;
				}
		}
		.d-photo {
				width: 100%;
				height: 400px;
		}	
	}
	.page-bottom{
		position: fixed;
		bottom: 0;
		width: 100%;
	}
		
</style>
